<template>
	<view class="content">
		<z-paging ref="paging" v-model="policeList" @query="queryList">
			<uni-search-bar @confirm="search" v-model="buildingNameOrDeviceName" placeholder="请输入设备名称或者建筑物" @input="input" @cancel="cancel"></uni-search-bar>
			<!-- <view class="search-result">
            <text class="search-result-text">当前输入为：{{ buildingNameOrDeviceName }}</text>
          </view> -->
			<title-bar
				haveTip
				haveRightCell
				:incompletedNumber="incompletedNumber"
				:completedNumber="completedNumber"
				:tabIndex="tabIndex"
				rightText="最近三日最新报警"
				@handleListBarTitleClick="titleClick"
				@handleNextContentClick="goToNext"
				noTab
			/>
			<device-list-item
				:key="index"
				v-for="(policeItem, index) in policeList"
				@deviceInfoClick="deviceInfoClick(policeItem)"
				:policeItem="policeItem"
				@dealRecordClick="dealRecordClick(policeItem)"
				@dealPolice="dealPolice(policeItem)"
				@deviceListItemClick="deviceListItemClick(policeItem)"
			/>
		</z-paging>
	</view>
</template>

<script>
import { handleThreeDaysPage } from '@/api/home';

export default {
	data() {
		return {
			policeList: [],
			tabIndex: '0',
			buildingNameOrDeviceName: '',
			incompletedNumber: 0,
			completedNumber: 0
		};
	},
	computed: {},
	onLoad() {},
	onUnload() {},
	onShow() {
		// uni.$on('refresh-police-list', () => {
		// 	this.$refs.paging.refresh();
		// });
		this.queryList(1, 10);
		// uni.$off('refresh-police-list');
	},
	methods: {
		queryList(pageNo, pageSize) {
			if (pageNo == 1) {
				uni.showLoading({
					title: '请求中...'
				});
			}
			handleThreeDaysPage({
				size: pageSize,
				pages: pageNo,
				buildingNameOrDeviceName: this.buildingNameOrDeviceName
			}).then((res) => {
				uni.hideLoading();
				const records = res.data.records || []; // 读取 data 数据
				this.$refs.paging.complete(records);
			});
		},
		handleClick(item) {
			console.log(item.name); // 打印点击的按钮对象
		},
		titleClick(data) {
			this.tabIndex = data;
		},
		goToNext() {
			console.log('quanbu');
		},
		search(confirmData) {
			console.log('confirm>>>', confirmData);
			console.log('confirmData>>>', confirmData);
			console.log('buildingNameOrDeviceName>>>', this.buildingNameOrDeviceName);
			this.$refs.paging.refresh();
		},
		input(textInputData) {
			console.log('textInput>>>', textInputData);
		},
		cancel(cancelData) {
			console.log('cancelData>>>', cancelData);
		},
		deviceListItemClick(policeItem) {
			console.log('policeItem>>>', policeItem);
			uni.navigateTo({
				url: '/pages/police/police-detail/police-detail?data=' + encodeURIComponent(JSON.stringify(policeItem))
			});
		},
		deviceInfoClick(policeItem) {
			console.log('policeItem>>>', policeItem);
			uni.navigateTo({
				url: `/pages/devices/detail/index?deviceId=${policeItem.deviceId}`
			});
		},
		dealRecordClick(policeItem) {
			console.log('policeItem>>>', policeItem);
			//处理结果
			uni.navigateTo({
				url: `/pages/police/police-res/police-res?data=` + encodeURIComponent(JSON.stringify(policeItem))
			});
		},
		dealPolice(policeItem) {
			console.log('policeItem>>>', policeItem);
			uni.navigateTo({
				url: `/pages/police/police-deal/police-deal?data=` + encodeURIComponent(JSON.stringify(policeItem))
			});
		}
	}
};
</script>

<style scoped>
.content {
	height: 100%;
	padding-bottom: calc(var(--window-bottom) + 20px);
	background-image: linear-gradient(to bottom, #add8e6, #fff);
}
</style>
